import React from 'react'
class Advertisement extends React.Component{

    render(){
        return(
            <div>
                <div className='box' style={{width:375,height:133,display:'flex'}}>
                    <div className='space' style={{width:20,height:133}}>

                    </div>
                    <div className='info' style={{width:335,height:133,display:'flex',flexWrap:'wrap'}}>
                        <div className='topSpace' style={{width:335,height:12}}>
                        </div>
                        <div className='userAndTime' style={{width:335,height:22,display:'flex',alignItems:'center'}}>
                            <div className='user' style={{fontSize:'13px',height:22,lineHeight:'22px',textAlign:'center',color:'#4e5969'}}>
                                稀土君
                            </div>
                            <div className='space' style={{width:8,borderRight:'1px solid hsla(0,0%,59.2%,.2)',height:14}}>

                            </div>
                            <div className='space' style={{width:7,height:22}}>

                            </div>
                            <div className='time' style={{fontSize:'14px',height:22,lineHeight:'22px',color:'#86909c'}}>
                                4天前
                            </div>
                        </div>
                        <div className='content' style={{width:335,height:99,display:'flex',flexWrap:'wrap',justifyContent:'center'}}>
                            <div className='topSpace' style={{height:6,width:335}}>

                            </div>
                            <div className='infoAndPic' style={{height:80,width:335,display:'flex'}}>
                                <div className='info' style={{height:80,width:203,display:'flex',flexWrap:'wrap'}}>
                                    <div className='title' style={{height:24,width:203,fontSize:'16px',color:'#1d2129',overflow:'hidden',textOverflow:"ellipsis",fontWeight:'700',lineHeight:'24px',whiteSpace:'nowrap'}}>
                                        稀土开发者大会出品人集结完毕，5折购票火热进行中！
                                    </div>
                                    <div className='space' style={{height:8,width:203}}>

                                    </div>
                                    <div className='description' style={{height:44,width:203,color:'#86909c',fontWeight:'400',overflow:'hidden',textOverflow:"ellipsis",fontSize:'13px',lineHeight:'22px'}}>
                                        2021年9月10-11日，由稀土掘金开发者社区主办的首届稀土开发者大会将于北京盛大开幕。目前14 大热门技术专题出品人全部集结完毕，来自各大互联网科技大厂的明星讲师正持续上线，5折购票火热进行中！
                                    </div>
                                </div>
                                <div className='space' style={{width:12,height:80}}>

                                </div>
                                <div className='pic' style={{width:120,height:80}}>
                                    <img width='120' height='80' src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68e8cfcb62f447338c0218f7f4802f5b~tplv-k3u1fbpfcp-zoom-mark-crop-v2:0:0:360:240.awebp' alt='「稀土开发者大会出品人集结完毕，5折购票火热进行中！」封面' ></img>
                                </div>
                            </div>
                            <div className='spaceBottom' style={{height:12,width:335,borderBottom:'1px solid hsla(0,0%,59.2%,.2)'}}>

                            </div>
                        </div>
                        
                    </div>
                    <div className='space' style={{width:20,height:133}}>

                    </div>
                </div>
            </div>
        )
    }
}
export default Advertisement